<!DOCTYPE html>
<html>
<head>
    <title>Pie</title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
    <script type="text/javascript" src="../src/JChart.js"></script>
    <script type="text/javascript" src="../src/JChart.Canvas.js"></script>
    <script type="text/javascript" src="../src/JChart.Chart.js"></script>
    <script type="text/javascript" src="../src/JChart.Pie.js"></script>
</head>
<body>
<canvas id="canvas2" height="160" width="320" style="margin-top: 10px;"></canvas>
<canvas id="canvas3" height="160" width="320" style="margin-top: 10px;"></canvas>
<script type="text/javascript">
    var pieData = [
        {
            name : 'B',
            value : 50,
            color : "#ffa400"
        },
        {
            name : 'C',
            value : 100,
            color : "#2197f3"
        }
    ];


    var p2 = new JChart.Pie(pieData,{
        id : 'canvas2',
        isDount : true,//是否饼图
        clickType : 'rotate',
        dountText : '1,566.00万',//中心文字
        dountFont : {
            size : 20,
            color : '#000'
        },
        dountTextDescribe:"课消总金额(元)",
        dountTextDescribeFont : {
            size : 14,
            color : '#999'
        },
        showBorder:false,//环块的边框
        dountRadiusPercent:"0.85",//空心比例
        showText:false,//显示环上的文字，
        animationEasing:"easeOutCubic",//动画效果，
//      animation:false,是否开启动画
    }).draw();
    var pieData=[
    {
    	value:23,
    	color:"#ff9191"
    },
    {
    	value:12,
    	color:"#9bcdf3"
    },
    {
    	value:70,
    	color:"#f5ef60"
    },
    {
    	value:45,
    	color:"#cf7edb"
    }
    ]
    var p3 = new JChart.Pie(pieData,{
        id : 'canvas3',
        isDount : true,//是否饼图
        bgColor:"#2197f3",
        clickType : 'rotate',
        dountText : '满班率',//中心文字
        dountFont : {
            size : 20,
            color : '#FFF'
        },
        showBorder:false,//环块的边框
        dountRadiusPercent:"0.85",//空心比例
        showText:false,//显示环上的文字，
        animationEasing:"easeOutCubic",//动画效果，
//      animation:false,是否开启动画
    }).draw();
//  p2.on('click',function(i,data){
//      p2.setDountText(data.value);
//      return true;
//  });
//  p2.draw();
</script>
</body>
</html>